<template>
  <div class="center">
    <div class="center-left">
      <el-menu
          active-text-color="#f5ff32"
          background-color="#ada1e6"
          class="el-menu-vertical-demo"
          default-active="/userCenter/"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          router="router"
      >
        <el-menu-item index="/userCenter/">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item index="/userCenter/recharge">
          <el-icon><Money /></el-icon>
          <span>钱包充值</span>
        </el-menu-item>
        <el-menu-item index="/userCenter/favorite">
          <el-icon><Star /></el-icon>
          <span>我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/userCenter/footprint">
          <el-icon><View /></el-icon>
          <span>我的足迹</span>
        </el-menu-item>
        <el-menu-item index="/userCenter/myOrder">
          <el-icon><List /></el-icon>
          <span>我的订单</span>
        </el-menu-item>
        <el-menu-item index="/userCenter/address">
          <el-icon><Location /></el-icon>
          <span>收货地址</span>
        </el-menu-item>
        <el-menu-item index="/userCenter/calendar">
          <el-icon><Calendar /></el-icon>
          <span>test</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="center-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import {
  Document,
      Menu as IconMenu,
      Location,
      Setting,
} from '@element-plus/icons-vue'
import {ref} from 'vue'

    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }


</script>

<style scoped lang="scss">
  .center {
    width: 1250px;
    min-height: 600px;
    /*border: 1px solid red;*/
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    .center-left {
      background: #e4def9;
      width: 200px;
    }
    .center-right {
      width: 100%;
      border-radius: 10px;
      margin-left: 30px;
      border: 1px solid gainsboro;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
    }
    .el-menu {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
    }
  }

</style>
